<template>
  <div class="box">
    <div class="top">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="formInline.user" placeholder=""></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" icon="el-icon-edit" @click="handleOusertt"
            >查找</el-button
          >
          <el-button type="primary" icon="el-icon-edit" @click="handleAdd"
            >添加</el-button
          >
          <el-button type="primary" icon="el-icon-edit" @click="handleDout"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="box-main">
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      >
        <el-table-column prop="id" label="团购规则ID" min-width="149">
        </el-table-column>
        <el-table-column prop="goodsId" label="商品ID" min-width="149">
        </el-table-column>
        <el-table-column prop="goodsName" label="名称" min-width="147">
        </el-table-column>
        <el-table-column prop="picUrl" label="图片" min-width="147">
          <template slot-scope="scope">
            <img
              :src="scope.row.picUrl"
              style="display: block; width: 40px; height: 40px; margin: 0 auto"
            />
          </template>
        </el-table-column>
        <el-table-column prop="discount" label="团购优惠" min-width="147">
        </el-table-column>
        <el-table-column prop="discountMember" label="团购要求" min-width="147">
        </el-table-column>
        <el-table-column prop="status" label="状态" min-width="184">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == '0'" type="success">
              {{ scope.row.level === "0" ? "到期下线" : "正常" }}</el-tag
            >
            <el-tag v-else>{{
              scope.row.level === "1" ? "正常" : "到期下线"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="expireTime" label="结束时间" min-width="147">
          <template slot-scope="scope">
            {{ scope.row.expireTime }}
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              @click="handleEdit(scope.row.id, scope.row)"
              >编辑</el-button
            >
            <el-button type="danger" @click="handleDelete(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :page-size="20"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 弹出框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="50%"
      class="box2"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="商品ID" prop="goodsId">
          <el-input
            v-model="ruleForm.goodsId"
            clearable
            style="width: 50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="团购折扣" prop="discount">
          <el-input
            v-model="ruleForm.discount"
            clearable
            style="width: 50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="团购人数要求" prop="discountMember">
          <el-input
            v-model="ruleForm.discountMember"
            clearable
            style="width: 50%"
          ></el-input>
        </el-form-item>
        <el-form-item label="过期时间" prop="expireTime">
          <el-date-picker
            v-model="ruleForm.expireTime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handlecancel">取 消</el-button>
        <el-button type="primary" @click="handleTrue">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  listRecord,
  listGroupon,
  deleteGroupon,
  publishGroupon,
  editGroupon,
} from "@/api/groupon";
import { service } from "@/utils/request";
// import { uploadPath } from "@/api/storage";
import * as XLSX from "xlsx";
export default {
  data() {
    return {
      formInline: {
        user: "",
      },
      srcList: [
        {
          picUrl: "",
        },
      ],
      tableData: [],
      title: "",
      region: "0",
      dialogVisible: false,
      page: 1,
      limit: 20,
      sort: "add_time",
      order: "desc",
      // ruleForm: {
      //   page: 1,
      //   limit: 20,
      //   sort: "add_time",
      //   order: "desc",
      // },
      ruleForm: {
        discount: "",
        discountMember: "",
        expireTime: "",
        goodsId: "",
      },
      rules: {
        discount: [
          { required: true, message: "团购折扣不能为空", trigger: "blur" },
        ],
        discountMember: [
          { required: true, message: "团购人数不能为空", trigger: "blur" },
        ],
        expireTime: [
          { required: true, message: "过期时间不能为空", trigger: "blur" },
        ],
        goodsId: [{ required: true, message: "商品不能为空", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.handleOusertt();
  },
  methods: {
    // 渲染数据
    handleOusertt() {
      listGroupon({
        page: this.page,
        limit: this.lismit,
        sort: this.sort,
        order: this.order,
        goodsId: this.goodsId,
      }).then((res) => {
        console.log(res, "123");
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
        console.log(this.tableData, "456");
        // const lisr = res.data.data.list.map((item) => ({
        //   label: item.name,
        //   id: item.id,
        //   value: item.id,
        // }));
        // this.lisr = lisr;
        // console.log(this.lisr, "321");
      });
      // 2
      // listCatL1(this.ruleForm).then((res) => {
      //   // const t2 = res.data.data.list
      //   // this.tableData2 = JSON.parse(JSON.stringify(t2))
      //   // console.log(this.tableData2);//已经获取了当前数据的列表
      // });
    },
    // 添加
    handleAdd() {
      this.dialogVisible = true;
      this.title = "创建";
    },
    formatCreateTime(dateString) {
      // 使用 Date.parse 自动解析日期字符串
      const parsedDate = Date.parse(dateString);
      const date = new Date(parsedDate);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const hours = String(date.getHours()).padStart(2, "0");
      const minutes = String(date.getMinutes()).padStart(2, "0");
      const seconds = String(date.getSeconds()).padStart(2, "0");
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    // 添加/编辑确定
    handleTrue() {
      if (this.title == "新增") {
        this.ruleForm.expireTime = this.formatCreateTime(
          this.ruleForm.expireTime
        );
        publishGroupon(this.ruleForm).then((res) => {
          if (res.data.errno === 0) {
            this.$notify({
              title: "成功",
              message: "添加成功！",
              type: "success",
            });
            this.dialogVisible = false;
            this.ruleForm = {};
            this.handleGetList();
          } else {
            this.$notify({
              title: "失败",
              message: "团购商品已经存在",
              type: "error",
            });
          }
        });
      } else if (this.title == "编辑") {
        editGroupon(this.ruleForm).then((res) => {
          this.$notify({
            title: "成功",
            message: "编辑成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.ruleForm = {};
          this.handleGetList();
        });
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },

    // 编辑
    handleEdit(id, row) {
      this.dialogVisible = true;
      this.title = "编辑";
      this.ruleForm = { ...row };
    },
    //  删除
    handleDelete(id) {
      deleteGroupon({
        id: id,
      }).then((res) => {
        this.$notify({
          title: "成功",
          message: "删除成功",
          type: "success",
        });
        this.handleGetList();
      });
    },
    // 取消
    handlecancel() {
      this.dialogVisible = false;
      this.ruleForm = {};
      this.handleGetList();
    },
  },
};
</script>
<style lang="scss" scoped>
.box::v-deep {
  .top {
    padding: 20px;
    margin-left: 100px;
  }

  .box-main {
    padding: 20px;

    .el-form-item__label {
      text-align: left !important;
    }

    .el-table {
      th {
        text-align: center;
      }

      td {
        text-align: center;
        height: 60px;
      }
    }
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>